<template>
  <base-page-view class-name="packets-container">
    <view class="list_view">
      <view class="couponList">
        <view v-for="(item,index) in packetList" :key="index" class="couponItem">
          <view class="descripe">
            <view class="left">
              <view class="price">
                <span class="price_small unusePrice">¥</span>
                <span class="price_bold unusePrice">{{ item.price }}</span>
                <view v-if="item.reward_type === 4 && item.coupon_b_o" class="left_tit">{{ '满' + item.coupon_b_o.standardPrice + '元可用' }}</view>
                <view v-else class="left_tit">{{ '现金红包' }}</view>
              </view>
            </view>
            <view class="right">
              <view class="packet_unuse">
                <span>{{ item.used ? '已使用' : '已过期' }}</span>
              </view>
            </view>
          </view>
          <view class="readPacketcoupnStateBox">
            <view @click="showRule(item)">
              <span>使用规则:</span>
              <span>
                <image class="ruleImg" :src="item.show ? require('@/static/images/mine/arror_up.png') : require('@/static/images/mine/arror_down.png')" />
              </span>
            </view>
            <view class="timeRange">
              {{ _formatDate(item.useStartTimeOfMillisecond,'yyyy-MM-dd HH:mm:ss') }} - {{ _formatDate(item.useStopTimeOfMillisecond,'yyyy-MM-dd HH:mm:ss') }}
            </view>
          </view>
          <view v-show="item.show" class="ruleText">
            {{ item.rule }}
          </view>
        </view>
      </view>
      <view v-if="packetList.length<1" class="empty_view">
        <b-image src="/static/images/empty/empty_coupon.png" class="img" :is-asset="true" />
        <view class="tit">暂无失效红包~</view>
        <view class="tit titC">再接再励继续加油哦~</view>
      </view>
    </view>
  </base-page-view>
</template>
<script>
import { formatDate } from '@/utils/tools'
import './index.scss'
export default {
  components: {
  },
  data() {
    return {
      pageIndex: 1,
      packetList: [],
      nomorePacket: false
    }
  },
  onLoad() {
    this.getPacketList()
  },
  onPullDownRefresh() {
    this.pageIndex = 1
    this.packetList = []
    this.nomorePacket = false
    this.getPacketList()
  },
  onReachBottom() {
    if (this.nomorePacket) return
    this.pageIndex += 1
    this.getPacketList()
  },
  methods: {
    _formatDate(date, type) {
      return formatDate(date, type)
    },
    async getPacketList() {
      const res = await this.$api.redPacketApi.getPacketMoneyUsed({
        pageIndex: 1,
        pageSize: 10
      })
      if (res.code === 0) {
        this.packetList = this.packetList.concat(res.data)
        if (res.data.length < 10) {
          this.nomorePacket = true
        }
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
      }
    },
    showRule(item) {
      this.$set(item, 'show', !item.show)
    }
  }
}
</script>
